<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="fragment" content="!">
  <link rel="stylesheet" href="app/css/bootstrap.css">
  <link rel="stylesheet" href="app/css/app.css">
    
  <title>Bootstrap Magic : Generate your own bootstrap theme quickly and easily</title>
  <meta name="description" content="Simple and fast Twitter bootstrap themes generator made with AngularJS. Design your own bootstrap theme, like it ? Download less or css on the go." />
  <link itemprop="SoftwareApplicationCategory" href="http://schema.org/SoftwareApplication"/>
  <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-37710723-1']);
      _gaq.push(['_trackPageview']);
   
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
     
  </script>
  
</head>
<body data-ng-cloak>
	<div class="protected">
        <nav class="navbar-inverse navbar-default" role="navigation">
	      <!-- Brand and toggle get grouped for better mobile display -->
	      <div class="navbar-header">
	        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
	          <span class="sr-only">Toggle navigation</span>
	          <span class="icon-bar"></span>
	          <span class="icon-bar"></span>
	          <span class="icon-bar"></span>
	        </button>
	        <a class="navbar-brand" href="index.html" title="Bootstrap Magic written in AngularJS">Bootstrap Magic</a>
	      </div>

	      <!-- Collect the nav links, forms, and other content for toggling -->
	      <div class="collapse navbar-collapse navbar-ex1-collapse">
	        <ul class="nav navbar-nav">
	          <li><a href="index.html" title="bootstrap themes generator presentation">Home</a></li>
	          <li class="divider-vertical"></li>
	          <li ><a href="app/index.html" title="bootstrap themes generator">Editor</a></li>
	          <li class="dropdown">
	            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Versions<b class="caret"></b></a>
	            <ul class="dropdown-menu">
	              <li><a href="app/index.html" title="bootstrap generator theme angularjs">Bootstrap 3.0</a></li>
	              <li><a href="../" title="bootstrap generator theme angularjs">Bootstrap 3.1</a></li>
	              <li><a href="../2.3.2" title="bootstrap generator theme angularjs">Bootstrap 2.3.2</a></li>
	            </ul>
	          </li>
	          <li class="divider-vertical"></li>
	          <li ><a href="http://en.orson.io/17/build-responsive-website-without-coding/?utm_source=Bootstrap%20Magic%20&utm_medium=referral&utm_content=Header&utm_campaign=Bootstrap" title="create website easily">Orson Website Builder</a></li>
	        </ul>

	        <ul class="nav navbar-nav navbar-right socialButtons">
	          <li>
	            <div class="fb-like" data-href="http://pikock.github.io/bootstrap-magic/"  data-send="false" data-layout="button_count" data-width="50" data-show-faces="false" data-action="like"></div>
	          </li>
	          <li class="twitter">
	            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://pikock.github.io/bootstrap-magic/" data-text="Bootstrap Magic feat Bootstrap 3 : Awesome theme generator with live preview" data-lang="en" data-hashtags="bootstrap,angularjs">Tweeter</a>
	          </li>
	          <li><div class="g-plusone" data-size="medium" data-href="http://pikock.github.io/bootstrap-magic/"></div></li>    
	        </ul>

	      </div><!-- /.navbar-collapse -->
	    </nav>
	</div>
	
	<div class="protected" itemscope itemtype="http://schema.org/SoftwareApplication">
        <div class="protectedIntroBody">
        	<section class="importantContainer">
        		<div class="container">
        			<section class="row">
			            <div class="col-md-12">	
			                <div class="introHeader">
			                	<div class="alert alert-success">
			                		If you need some AngularJS expertise, feel free to contact us : dev @ pikock (dot) com
			                	</div>
			                    <h1><span itemprop="name">Bootstrap Magic </span><small>featuring Boostrap 3, made with AngularJS</small></h1>
			                        <p class="lead"><span itemprop="description">Easily create your own <a href="http://getbootstrap.com/" title="Twitter Bootstrap themes generator">Twitter Bootstrap</a> theme.</span> Like it ? Save it !</p>
			                        <p class="buttonsBlocks">
			                            <a class="btn btn-primary btn-lg" href="app/index.html" title="try bootstrap themes generator angularjs">
			                              Create your theme
			                            </a>
			                            <span class="github">
			                            	<a href="https://github.com/pikock/bootstrap-magic" title="angular js bootstrap themes generator"> » GitHub project</a>
										</span>
										<span class="github">
											<a href="../2.3.2" title="angular js bootstrap themes generator"> 2.3.2</a> - 
											<a href="app/index.html" title="angular js bootstrap themes generator"> 3.0</a> - 
			                            	<a href="../" title="angular js bootstrap themes generator"> 3.1</a>
										</span>
			                        </p>
			                </div>
			            </div>
	       	 		</section>
        		</div>
        	</section>
            
			<div class="container">
				<section class="row">
		            <div class="col-md-12">
		                <h2 class="centerTitle">What's great ? </h2>
		            
		                <section class="row">

		                	<div class="col-md-4">
		                        <h4><span class="apico interface apico-sax"></span>Bootstrap 3</h4>
		                        <p>New Twitter Bootstrap Framework included for more awesomeness.</p>
		                    </div>

		                    <div class="col-md-4">
		                        <h4><span class="apico games apico-eye-open"></span>Contextual and live preview</h4>
		                        <p>See instantly what you are changing on the content.</p>
		                    </div>
		                    
		                    <div class="col-md-4">
		                        <h4><span class="apico interface apico-magic-wand"></span>Magic Typeahead </h4>
		                        <p>Awesome typehead function included :<b> Find variables as you type.</b></p>
		                    </div>
		                    
		                    
		                </section>
		            
		                <section class="row">
		                	<div class="col-md-4">
		                        <h4><span class="apico games apico-cloud-upload"></span>Import your variables</h4>
		                        <p>You already have set some variables. Import them and you can even custom your own new variables.</p>
		                    </div>
		                    <div class="col-md-4">
		                        <h4><span class="apico games apico-brush"></span>Colorpicker</h4>
		                        <p>Got the color that you love with <a href="http://www.eyecon.ro/bootstrap-colorpicker/" title="colorpicker bootstrap">Colorpicker.</a></p>
		                    </div>
		                    <div class="col-md-4">
		                        <h4><span class="apico interface apico-text-tools"></span>Google Webfonts</h4>
		                        <p>Add awesome webfonts from <a href="http://www.google.com/fonts#" title="Google Webfonts">Google Webfont</a>. They are all included in font magic typehead.</p>
		                    </div>
		                </section>	
		            	
		            	<section class="row">
		            	    <div class="col-md-4">
		                   	     <h4><span class="apico games apico-circle-plus"></span>Less included</h4>
		                   	     <p>You like <a href="http://lesscss.org/" title="Less css">Less </a>? Bootstrap theme editor support lovely Less language with all the functions. Use all <b>the functions less that you love.</b></p>
		                   	</div>
		                   	<div class="col-md-4">
		                   	     <h4><span class="apico media apico-doc-out"></span>Download</h4>
		                   	     <p>Satisfy? Download your personalized CSS, minified or not and LESS variables.</p>
		                   	</div>
		            	    <div class="col-md-4">
		            	        <h4><span class="apico games apico-atoms"></span>AngularJS Project</h4>
		            	        <p><a href="http://angularjs.org/" title="angular js framework">Awesome framework</a> for an awesome project. Check out our main Project Orson, all made with AngularJS and Rails : <a href="http://en.orson.io/17/build-responsive-website-without-coding/?utm_source=Bootstrap%20Magic%20&utm_medium=referral&utm_content=Text&utm_campaign=Bootstrap" title="create your website easily"> Orson.</a></p>
		            	    </div>
		            	    
		            	</section>
		            </div>
		        </section>
			</div>

	        <div class="buttonsDiv">
	        	<div class="container">
	        		<p class="buttonsBlocks lead">
	        			Create simply your own Twitter Bootstrap theme. Like it ? Save it !
	                    <a class="btn btn-default btn-lg" href="app/index.html" title="try bootstrap theme generator angularjs">
	                      Create your theme now
	                    </a>
	                </p>
	        	</div>
            </div>
		    
		    <div class="container">
		         <section class="row">
		            <div class="col-md-12 blockquotes">
		                <h2 class="centerTitle">They talked about it.</h2>

		                <section class="row">
		                    <div class="col-md-4">
		                    	<blockquote class="twitter-tweet"><p>Bootstrap Magic featuring Boostrap 3 <a href="http://t.co/lZFNYyKP0M">http://t.co/lZFNYyKP0M</a> (<a href="http://t.co/uYWmjLxyVP">http://t.co/uYWmjLxyVP</a>)</p>&mdash; Hacker News 50 (@newsyc50) <a href="https://twitter.com/newsyc50/statuses/374958983737389057">September 3, 2013</a></blockquote>
								
								<blockquote class="twitter-tweet"><p>Bootstrap Magic : Generate your own bootstrap theme quickly and easily --&gt; <a href="http://t.co/2Dn780h9IW">http://t.co/2Dn780h9IW</a></p>&mdash; Jeremy Morgan  (@JeremyCMorgan) <a href="https://twitter.com/JeremyCMorgan/statuses/375227302575370240">September 4, 2013</a></blockquote>
								
								<blockquote class="twitter-tweet" lang="fr"><p>Bootstrap Magic – A Twitter Bootstrap themes generator <a href="http://t.co/sOTUKTM5" title="http://ow.ly/gV0T2">ow.ly/gV0T2</a></p>&mdash; Paul Andrew (@speckyboy) <a href="https://twitter.com/speckyboy/status/292210993117941762">Janvier 18, 2013</a></blockquote>

		                    </div>

		                   	<div class="col-md-4">
		                        <blockquote class="twitter-tweet" lang="fr"><p>Bootstrap Magic – Personnalisez vos templates Twitter Bootstrap en quelques clics <a href="http://t.co/cj0vRiiJ" title="http://goo.gl/fb/Vp76B">goo.gl/fb/Vp76B</a> <a href="https://twitter.com/search/%23blog">#blog</a></p>&mdash; Korben (@Korben) <a href="https://twitter.com/Korben/status/291541713510621184" data-datetime="2013-01-16T13:45:35+00:00">Janvier 16, 2013</a></blockquote>
		                        <blockquote class="twitter-tweet" lang="fr"><p>Bootstrap Magic : Twitter bootstrap themes generator <a href="http://t.co/b98IA6Po" title="http://pikock.github.com/bootstrap-magic/index.html">pikock.github.com/bootstrap-magi…</a></p>&mdash; Daniel Stefanovic (@DaniStefanovic) <a href="https://twitter.com/DaniStefanovic/status/294008080335765504">Janvier 23, 2013</a></blockquote>
		                    </div>

		                    <div class="col-md-4">
		                        <blockquote class="twitter-tweet"><p>Bootstrap Magic <a href="http://t.co/1EOz9Sd08V">http://t.co/1EOz9Sd08V</a> 일전에 소개드린 부트스트랩 테마 제너레이터가 버전 3을 지원하네요. 당연하지만^^</p>&mdash; Nolboo Kim (@n0lb00) <a href="https://twitter.com/n0lb00/statuses/375189391725330432">September 4, 2013</a></blockquote>
		                        
		                        <blockquote class="twitter-tweet" lang="fr"><p>Bootstrap Magic - another easy way to theme and set your Bootstrap-powered site apart. <a href="http://t.co/bLB6kvR1" title="http://pikock.github.com/bootstrap-magic/index.html">pikock.github.com/bootstrap-magi…</a></p>&mdash; Brian Ford (@briantford) <a href="https://twitter.com/briantford/status/291608969963782145" data-datetime="2013-01-16T18:12:50+00:00">Janvier 16, 2013</a></blockquote>
								
		                        <blockquote class="twitter-tweet"><p>Bootstrap3のテーマをWYSIWYGでカスタマイズ可能な「Bootstrap Magic」 <a href="http://t.co/R9JxUBeFps">http://t.co/R9JxUBeFps</a></p>&mdash; phpspot (@phpspot_kj) <a href="https://twitter.com/phpspot_kj/statuses/375410731711078401">September 5, 2013</a></blockquote>
		                    </div>   
		                </section>

		            </div>
		        </section>
			</div>


    	</div>
	</div>
    
	<footer class="protected">
		<div class="footer">
			<div class="container">
				<div class="col-md-12 ">
					<p class="pull-left">Code licensed under <a href="http://opensource.org/licenses/MIT" title="MIT licence">MIT licence</a></p>
					<div class="pull-left" xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/" about="http://subtlepatterns.com/inspiration-geometry/"><span property="dct:title">/ Subtle Patterns</span> (<a rel="cc:attributionURL" property="cc:attributionName" href="http://subtlepatterns.com">Subtle Patterns</a>) / <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA 3.0</a></div>
					<p class="pull-right">Handmade by <span itemprop="author" itemscope itemtype="http://schema.org/Organization"><a itemprop="url" href="http://en.orson.io/17/build-responsive-website-without-coding/?utm_source=Bootstrap%20Magic%20&utm_medium=referral&utm_content=Footer&utm_campaign=Bootstrap" title="create your website easily"><span itemprop="name">Orson Website Builder <span></a> </span>x <a href="http://www.autreplanete.com/" title="web agency paris">Autre planète</a> in Paris.</p>
				</div>
			</div>
		</div>
	</footer>

<div id="fb-root"></div>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<script type="text/javascript" src="app/lib/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="twitter-bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
	(function(d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) return;
	js = d.createElement(s); js.id = id;
	js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=239545502808545";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));

	window.___gcfg = {lang: 'fr'};

	(function() {
	  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
	  po.src = 'https://apis.google.com/js/plusone.js';
	  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
	})();
	  
	!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 977336662;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
	<div style="display:inline;">
	<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/977336662/?value=0&amp;guid=ON&amp;script=0"/>
	</div>
</noscript>
</body>
</html>
